<template>
  <div class="order">
    <mt-header title="提交订单" class="color-white">
      <router-link to="/" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
      <mt-button slot="right">这里是位置</mt-button>
    </mt-header>
    <div class="main">
      <!-- 商品信息 -->
      <div class="pro">
        <h1 class="pro-title">{{ protitle }}</h1>
        <p class="pro-price-title">评估价</p>
        <p class="pro-price">
          <span class="icon"
            >￥<span class="price">{{ proprice }}</span></span
          >
          <button class="btn-price">估价详情</button>
        </p>
      </div>
      <!-- 价格走势图 -->
      <div class="price-chart">
        <img width="100%" src="/img/index/20200715142838_9405.png" alt="" />
        <p class="chart-text">
          3C产品平均第一年贬值<span class="font-red">60%</span>预计降幅<span
            class="price-icon"
            >￥</span
          ><span class="price">303</span>
        </p>
      </div>
      <!-- 选择回收方式 -->
      <div class="choseWay">
        <div class="way"><h3>选择回收方式</h3></div>
        <ul class="waylist">
          <li class="way-item">
            <button
              :class="{ active: method == '1' }"
              @click="recyclingMethod(1)"
            >
              上门回收</button
            ><span class="p-absolute" :class="{ chose: method == '1' }"
              >当面结款</span
            >
          </li>
          <li class="way-item">
            <button
              :class="{ active: method == '2' }"
              @click="recyclingMethod(2)"
            >
              邮寄回收</button
            ><span class="p-absolute" :class="{ chose: method == '2' }"
              >顺丰回收</span
            >
          </li>
        </ul>
      </div>
      <!-- 填写个人信息 -->
      <div class="userinfo">
        <mt-field
          label="联系人"
          placeholder="请输入联系人"
          v-model="username"
        ></mt-field>
        <mt-field
          label="手机号"
          placeholder="请输入手机号"
          type="tel"
          v-model="phone"
        ></mt-field>

        <mt-field
          label="地址"
          :value="myAddress"
          @focus.native.capture="openQuestionType"
        ></mt-field>
        <mt-popup
          style="width: 100%"
          v-model="popupVisible"
          popup-transition="popup-fade"
          closeOnClickModal="true"
          position="bottom"
        >
          <mt-picker
            style="width: 100%"
            :slots="myAddressSlots"
            @change="onMyAddressChange"
          >
          </mt-picker>
        </mt-popup>
        <!-- 详细地址 -->
        <mt-field
          class="m-b"
          label="详细地址"
          placeholder="请输入您的详细地址"
          v-model="fullAddress"
        ></mt-field>
      </div>
    </div>
    <!-- 底部提交订单 -->
    <div class="footer">
      <div class="submit-order">
        <div class="block">
          <span class="total-style">合计<span class="total-icon">￥</span></span
          ><span class="total-font">{{ proprice }}</span>
          <button class="submit" @click="submitOrder">提交订单</button>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
.order {
  .color-white {
    background: #fff;
    color: #000;
  }
  .main {
    width: 100%;
    .pro {
      background: url("/img/index/20200319140853_6186.png") no-repeat;
      background-size: cover;
      padding: 25px;
      color: #fff;
      .pro-title {
        font-size: 20px;
        font-weight: 700;
      }
      .pro-price-title {
        font-size: 16px;
        margin: 15px 0;
      }
      .pro-price {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        .price {
          font-size: 40px;
        }
        .btn-price {
          width: 80px;
          height: 28px;
          background: #fff;
          border: 0;
          color: #f74444;
          font-size: 14px;
          border-radius: 18px;
        }
      }
    }
    .price-chart {
      width: 100%;
      height: 165px;
      padding: 15px;
      border-bottom: 5px solid #f5f5f5;
      background: #fff;
      text-align: center;
      .chart-text {
        font-size: 12px;
        margin-top: 25px;
        .font-red {
          color: #f74444;
        }
        .price {
          font-size: 16px;
          color: #f74444;
          font-weight: 500;
        }
      }
    }
    .choseWay {
      height: 115px;
      padding: 15px;
      border-bottom: 5px solid #f5f5f5;
      .way {
        margin-bottom: 15px;
      }
      .waylist {
        display: flex;
        justify-content: space-between;
        .way-item {
          position: relative;
          width: 115px;
          height: 55px;
          button {
            width: 100%;
            height: 100%;
            border: 0;
            border-radius: 8px;
            background: #f5f5f5;
            color: #999;
            font-size: 14px;
            font-weight: 700;
          }
          button.active {
            background: #fb5f28;
            color: #fff;
          }
          .p-absolute {
            position: absolute;
            width: 60px;
            line-height: 20px;
            border-radius: 5px;
            background: #b0b0b0;
            text-align: center;
            color: #fff;
            font-size: 8px;
            top: 0;
            right: 0;
            font-size: 13px;
          }
          .chose {
            background: #fdf36c;
            color: #000;
          }
        }
      }
    }
    .m-b {
      margin-bottom: 55px;
    }
  }
  // 底部
  .footer {
    position: fixed;
    height: 55px;
    border-top: 3px solid #000;
    background: #fff;
    left: 0;
    right: 0;
    bottom: 0;
    .block {
      position: absolute;
      right: 0;
      bottom: 0;
      .total-style {
        font-size: 12px;
      }
      .total-icon {
        color: #f74444;
      }
      .total-font {
        font-size: 22px;
        color: #f74444;
      }
      .submit {
        width: 125px;
        height: 52px;
        border: 0;
        margin-left: 40px;
        background: #f74444;
        color: #fff;
      }
    }
  }
}
</style>
<script>
import myaddress from "../../../public/json/pca.json"; //引入省市区数据
export default {
  data() {
    return {
      uid: "",
      customer: "",
      protitle: "",
      proprice: "",
      username: "",
      phone: "",
      propic:"",
      method: "",
      fullAddress: "",
      popupVisible: false, //问题类型弹框
      myAddressSlots: [
        {
          flex: 1,
          defaultIndex: 1,
          values: Object.keys(myaddress), //省份数组
          className: "slot1",
          textAlign: "left",
        },
        {
          divider: true,
          content: "-",
          className: "slot2",
        },
        {
          flex: 1,
          values: [],
          className: "slot3",
          textAlign: "left",
        },
        {
          divider: true,
          content: "-",
          className: "slot4",
        },
        {
          flex: 1,
          values: [],
          className: "slot5",
          textAlign: "left",
        },
      ],
      myAddressProvince: "省",
      myAddressCity: "市",
      myAddresscounty: "区/县",
      // 我的地址
      myAddress: "",
    };
  },
  methods: {
    /**
     * 打开弹框
     */
    openQuestionType() {
      this.popupVisible = true;
    },

    onMyAddressChange(picker, values) {
      if (myaddress[values[0]]) {
        //这个判断类似于v-if的效果（可以不加，但是vue会报错，很不爽）
        picker.setSlotValues(1, Object.keys(myaddress[values[0]])); // Object.keys()会返回一个数组，当前省的数组
        picker.setSlotValues(2, myaddress[values[0]][values[1]]); // 区/县数据就是一个数组
        this.myAddressProvince = values[0];
        this.myAddressCity = values[1];
        this.myAddresscounty = values[2];
        this.myAddress =
          this.myAddressProvince +
          " " +
          this.myAddressCity +
          " " +
          this.myAddresscounty;
      }
    },
    // 选择回收方式
    recyclingMethod(method) {
      // 1:上门回收  2:：邮寄
      this.method = method;
    },
    // 提交订单
    submitOrder() {
      this.axios
        .get("/order/addorder", {
          params: {
            uid: this.uid,
            good_name: this.protitle,
            customer: this.username,
            phone: this.phone,
            address: this.myAddress + this.fullAddress,
            money: this.proprice,
            status_id: "1",
            method_id: this.method,
            good_pic:this.propic
          },
        })
        .then((res) => {
          if(res.data.code=="200"){
            alert("添加成功");
            this.$router.push("/orderlist");
          }
        });
    },
  },
  mounted() {
    // 获取用户名和用户id
    this.uid = window.sessionStorage.getItem("uid");
    this.customer = window.sessionStorage.getItem("username");
    // 获取地址栏查询字符串
    this.proprice = this.$route.query.proprice;
    this.protitle = this.$route.query.protitle;
    this.propic = this.$route.query.propic;
    this.$nextTick(() => {
      //vue里面全部加载好了再执行的函数 （类似于setTimeout）
      this.myAddressSlots[0].defaultIndex = 0;
      // 这里的值需要和 data里面 defaultIndex 的值不一样才能够初始化
      //因为我没有看过源码（我猜测是因为数据没有改变，不会触发更新）
    });
  },
};
</script>